<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学掌门Atstudy网校 - IT线上学习平台|打造精品IT职业在线教育及实战平台</title>
		<link data-n-head="ssr" rel="icon" type="image/x-icon" href="favicon.ico" />
		<meta data-n-head="ssr" name="keywords"
			content="学掌门Atstudy网校,博为峰Atstudy网校,Atstudy网校,软件测试在线学习,IT职业教育,IT在线培训,IT在线学习,it职业培训,软件测试自学,测试测试工具,自动化测试,接口测试,软考,istqb,python,移动开发,selenium,loadrunner,大数据">
		<meta data-n-head="ssr" data-hid="description" name="description"
			content="学掌门Atstudy网校打造国内精品IT职业在线教育平台,提供软件测试基础,自动化测试,接口测试,软考,istqb,python,移动开发,selenium,loadrunner等线上IT学习视频课程,利用在线学习便捷性,结合IT职业发展特点,着重加强IT项目实战技能,结合在线答疑,实时笔记,在线题库及测验,满足IT学习者从零基础起步直至IT高级岗位的技能所需,成就IT职业梦想">
		<link rel="stylesheet" href="css/bootstrap.css" />
		<script src="js/jquery-3.6.1.min.js"></script>
		<script src="js/jquery.validate.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<style type="text/css">
			body {
				background-image: url(img/background.jpg);
				background-repeat: no-repeat;
				background-size: cover;
			}

			.col-lg-4 {
				background-color: #fff;
				width: 355px;
				/* height: 493px; */
				margin-top: 60px;
				border-radius: 10px;
				box-shadow: 2px 2px;
			}

			.form-signin {
				margin: 30px 0px;
			}

			.form-signin input {
				border: none;
				height: 40px;
			}

			.form-signin input:focus {
				outline: none;
			}

			.form-signin button {
				width: 100%;
				height: 40px;
			}

			.text-primary {
				font-size: 25px;
				margin-top: 20px;
				text-align: center;
			}

			img {
				width: 80%;
			}

			.thumbnail {
				border: 0px;
			}

			.text-muted {
				margin-left: 10px;
				width: 70px;
			}

			.footer {
				background-color: #f5f5f5;
				font-size: 12px;
				text-align: center;
				padding: 10px 0px;
				margin-top: 10px;
				border-radius: 0px 0px 10px 10px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="row">
				<div class="col-lg-4 col-lg-offset-7">
					<p class="text-primary">账户密码登录</p>
					<form class="form-signin" id="signupForm">
						<div class="form-group">
							<input type="email" name="email" class="form-control" placeholder="请输入邮箱" id="inputEmail">
						</div>
						<div class="form-group">
							<input type="password" name="password" class="form-control" placeholder="请输入密码"
								id="inputPassword">
						</div>
						<button type="submit" class="btn btn-primary">登录</button>
					</form>
					<hr />
					<div class="row">
						<div class="col-lg-3 col-lg-offset-1">
							<a href="#" class="thumbnail mode">
								<img src="img/wechat.png" alt="...">
							</a>
							<p class="text-muted">微信登录</p>
						</div>
						<div class="col-lg-3">
							<a href="#" class="thumbnail mode">
								<img src="img/phone.png" alt="...">
							</a>
							<p class="text-muted">手机登录</p>
						</div>
						<div class="col-lg-3">
							<a href="#" class="thumbnail mode">
								<img src="img/qq.png" alt="...">
							</a>
							<p class="text-muted">QQ登录</p>
						</div>
					</div>
					<div class="row footer">
						<div class="col-lg-12">登录即同意《学掌门服务协议》《隐私协议》</div>
					</div>
				</div>
			</div>
		</div>
		<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" id="loginModal">
			<div class="modal-dialog modal-sm" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
								aria-hidden="true">&times;</span></button>
						<h4 class="modal-title">提示信息</h4>
					</div>
					<div class="modal-body">
						<p class="text-danger">邮箱或密码错误</p>
					</div>
				</div>

			</div>
		</div>
		<script type="text/javascript">
			//登录方式
			let modeName = 'phone';
			//记录登录信息
			function log(email) {
				//从localStorage中获取登录日志（json格式字符串）
				let logStr = localStorage.getItem("log");
				//json格式字符串-->数组对象
				const logObj = JSON.parse(logStr);
				//当前日期
				var date = new Date();
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var day = date.getDate();
				//登录日志对象
				const log = {
					email,
					model: modeName,
					time: year + "-" + month + "-" + day
				}
				//push到数组对象中
				logObj.push(log);
				//存储localStorage中
				localStorage.setItem("log", JSON.stringify(logObj))
			}
			$.validator.setDefaults({
				submitHandler: function() {
					let email = $('#inputEmail').val();
					let password = $('#inputPassword').val();

					$.ajax({
						url: 'user.json',
						type: 'get',
						dataType: 'json',
						success: function(data) {
							if (data.email == email && data.password == password) {
								log(data.email);
								location.href = "学掌门.html";
							} else {
								$('#loginModal').modal('show');
							}
						}
					})
				}
			});
			$(document).ready(function() {
				$("#signupForm").validate({
					rules: {
						email: {
							required: true,
							email: true
						},
						password: {
							required: true,
							minlength: 6
						}
					},
					messages: {
						password: {
							required: "请输入密码",
							minlength: "密码长度至少6个字符"
						},
						email: "请输入有效的邮箱地址",
					},
					errorElement: "em",
					errorPlacement: function(error, element) {
						// Add the `help-block` class to the error element
						error.addClass("help-block");

						if (element.prop("type") === "checkbox") {
							error.insertAfter(element.parent("label"));
						} else {
							error.insertAfter(element);
						}
					},
					highlight: function(element, errorClass, validClass) {
						$(element).parents(".form-group").addClass("has-error").removeClass("has-success");
					},
					unhighlight: function(element, errorClass, validClass) {
						$(element).parents(".form-group").addClass("has-success").removeClass("has-error");
					}
				});

				$('.mode').click(function(e) {
					e.preventDefault();
					const img = $(this).children();
					let src = img.attr('src');
					modeName = src.substring(src.indexOf('/') + 1, src.indexOf('.'));
				})
			});
		</script>

	</body>
</html>
